<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="utf-8">
  <title>2.1</title>
  <style media="screen">
    body {
        width: 600px;
        margin: 30px auto;
      }
    </style>
</head>

<body>
  每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：<br>

  var vm = new Vue({
  // 选项
  })
  <p>
    虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。<p>
      <br>
      当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。<p>
        <br>
        一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：<p>
        </p>
        根实例<br>
        └─ TodoList<br>
        ├─ TodoItem<br>
        │ ├─ DeleteTodoButton<br>
        │ └─ EditTodoButton<br>
        └─ TodoListFooter<br>
        ├─ ClearTodosButton<br>
        └─ TodoListStatistics<br>
        <div id='app'>
          <h3>foo:{{foo}}</h3>
          <button v-on:click="foo='change'">change it</button>
        </div>
        <img  border="0" src="https://github.com/LinStan/VueStudy/readme/5.png" alt="VUE生命周期">
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  var data = {a: 1};
  //相当于绑定了data和vm中的data
  var vm = new Vue({
    data:data
  })
  vm.b=4;
  vm.a = data.a;
  vm.a=2;
  console.log(data.a);
  data.a = 3;
  console.log(vm.a);

  var obj = {foo:'bar'}
  //对象冻结无法更改
  Object.freeze(obj);
  var vm1 = new Vue({
    el:'#app',
    data: obj,
    created: function(){
      console.log('foo is '+this.foo);
    }
  })
</script>

</html>
